<template>
  <van-space direction="vertical" size="50px" fill>
    <van-cell></van-cell>
    <van-col offset="10"
      ><van-image
        src="/logo.jpg"
        center
        width="4rem"
        height="4rem"
        round
      ></van-image
    ></van-col>

    <van-field
      v-model="username"
      type="username"
      label="用户名"
      placeholder="请输入用户名或手机号"
      :label-width="100"
    />
  </van-space>
  <van-field
    v-model="password"
    type="password"
    label="密码"
    placeholder="请输入密码"
    :label-width="100"
  />
  <van-cell center>
    <van-checkbox v-model="checked" checked-color="#000000"
      >同意相关用户隐私条款</van-checkbox
    >
  </van-cell>

  <van-button
    type="primary"
    block
    @click="OnClickLogin"
    color="linear-gradient(to right, #a9a9a9, #333333)"
    round
    >登录</van-button
  >
  <div>
    <p style="text-align: center" @click="pustregister">没有账号？注册</p>
  </div>
  <div>
    <p style="text-align: center" @click="fogetPassword">忘记密码</p>
  </div>
  <van-space direction="vertical" size="120px" fill>
    <p></p>
    <p style="text-align: center; color: darkgray; font-size: 12px">
      © 2024 红薯科技. All rights reserved.
    </p>
  </van-space>
  <p style="text-align: center; color: darkgray; font-size: 12px">
    晋ICP备2024044585号
  </p>
</template>

<script>
import { ref } from "vue";
import MyAxios from "@/plugins/MyAxios";
import routers from "@/router";
import { showLoadingToast, showNotify } from "vant";

export default {
  setup() {
    const username = ref("");
    const password = ref("");
    const checked = ref(false);

    let isSubmitting = false; // 添加一个状态标记，防止重复提交
    const OnClickLogin = () => {
      if (isSubmitting) {
        return;
      }
      isSubmitting = true;
      if (!checked.value) {
        return;
      }
      const toast1 = showLoadingToast({
        message: "正在登录...",
        forbidClick: true,
      });
      setTimeout(() => {
        const response = MyAxios.post("/user/login", {
          userAccount: username.value,
          userPassword: password.value,
        });
        response.then((res) => {
          const { code } = res;
          const { data } = res.data;
          toast1.close();
          if (code === 0) {
            sessionStorage.setItem("cookie", data);
            pushHome();
          } else {
            showNotify({ type: "warning", message: res.data.message });
          }
          isSubmitting = false;
        });
      }, 500);
    };
    const pushHome = () => {
      routers.push({ path: "/" });
    };

    const pustregister = () => {
      routers.push({ path: "/register", component: "RegisterPage" });
    };

    const PushUserAgree = () => {
      routers.push({ path: "/useragree" });
    };

    const fogetPassword = () => {
      routers.push({ path: "/forgetpassword" });
    };
    return {
      username,
      password,
      OnClickLogin,
      pustregister,
      checked,
      PushUserAgree,
      fogetPassword,
    };
  },
};
</script>

<style scoped></style>
